<template>
    <table-search
        :current-page='table.pages'
        :page-size='table.size'
        :total='table.total'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
    >
        <template #search>
            <el-row :gutter='15' class='clear-both'>
                <el-col :span='24'>
                    <card-list title='高级搜索' type='keyvalue' :show-header='true'>
                        <template #btn>
                            <el-button-group>
                                <el-button icon='Search' size='small' @click='submit'>搜索</el-button>
                            </el-button-group>
                        </template>
                        <template #keyvalue>
                            <el-form ref='refForm' class='card-list-form' :model='form' :rules='rules' size='small'>
                                <el-row :gutter='15'>
                                    <card-list-item width='100px' prop='name'>
                                        <template #key>委托单位名称</template>
                                        <template #value>
                                            <el-input v-model='form.client' placeholder='请输入委托单位名称' />
                                        </template>
                                    </card-list-item>
                                </el-row>
                            </el-form>
                        </template>
                    </card-list>
                </el-col>
            </el-row>
        </template>
        <el-table
            ref='filterTable'
            row-key='id'
            highlight-current-row
            border
            :data='tableData.records'
            style='width: 100%;'
        >
            <el-table-column prop='id' label='id' width='100' />
            <el-table-column prop='name' label='检测站名称' column-key='client' />
            <el-table-column prop='cma' label='cma' />
            <el-table-column prop='createTime' label='创建时间' sortable />
            <el-table-column prop='updateTime' label='更新时间' sortable />
            <el-table-column label='操作'>
                <template #default='scope'>
                    <el-button type='text' size='small' @click='bindCheckTypeClick(scope.row)'>检测报告关联</el-button>
                    <!--                    <el-button type='text' size='mini' @click='handleEdit(scope.row)'>编辑</el-button>-->
                    <!--                    <el-button type='text' size='mini' @click='handleDelete(scope.row)'>删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
    </table-search>

    <!--    弹出层,修改关联检测报告-->
    <el-dialog v-model='dialogTableVisible' :title='`[${checkdData.action.name}] 检测站关联报告`'>
        <!--        style='text-align: left; display: inline-block'-->

        <el-transfer
            v-model='checkdData.rightValue'
            filterable
            filter-placeholder='搜索'
            :titles='["未关联", "已关联"]'
            :button-texts='["取消关联", "关联"]'
            :format='{
                noChecked: "${total}",
                hasChecked: "${checked}/${total}",
            }'
            :data='checkTypeData.records'
            :props='{
                key: "id",
                label: "reportName"
            }'
            @change='editCheckType'
        />
    </el-dialog>

</template>

<script lang='ts'>
import { defineComponent, reactive, Ref, ref } from 'vue'
import TableSearch from '/@/components/TableSearch/index.vue'
import CardList from '/@/components/CardList/CardList.vue'
import CardListItem from '/@/components/CardList/CardListItem.vue'
// 网络请求
import { editCheckType as apiEditCheckType, getCheckType, getTableList } from '/@/api/Check'
import { getTableList as getCheckTypeTableList } from '/@/api/CheckType'
import { validate } from '/@/utils/formExtend'
// table结构
import { ICheckTableList } from '/@/type/views/Check/CheckList'
import { ICheckTypeTableList } from '/@/type/views/CheckType/CheckTypeList'

interface ISearchForm {
    client: string
}

// 键值对样式，及表单校验
const search = (table: ITable<ICheckTableList>, form: ISearchForm) => {
    const rules = reactive({})
    const refForm = ref(null)
    const submit = async() => {
        if (!await validate(refForm)) return
        table.pages = 1
        await renderTableList(table, form)
    }
    return {
        rules,
        submit,
        refForm
    }
}

const renderTableList = async(table: ITable<ICheckTableList>, form: ISearchForm) => {
    const d = await getTableList({ page: table.pages, pageSize: table.size, ...form })
    table.records = d.data.data.records
    table.total = d.data.data.total
}

const tableRender = (table: ITable<ICheckTableList>, form: ISearchForm) => {
    renderTableList(table, form)
    const handleSizeChange = (v: number) => (table.size = v) && renderTableList(table, form)
    const handleCurrentChange = (v: number) => (table.pages = v) && renderTableList(table, form)
    return { table, handleSizeChange, handleCurrentChange }
}

const getCheckTypeData = async(checkTypeData) => {
    const d = await getCheckTypeTableList({ page: 1, pageSize: 99999 })
    checkTypeData.records = d.data.data.records
}

const bindCheckType = (checkdData, checkTypeData, dialogTableVisible: Ref) => {
    // 先获取全部检测类型
    getCheckTypeData(checkTypeData)

    const bindCheckTypeClick = async(row: ICheckTableLis) => {
        // 获取当前已关联
        const d = await getCheckType(row.id)
        checkdData.rightValue = []
        d.data.data.forEach((v) => {
            checkdData.rightValue.push(v.check_type_id)
        })
        checkdData.action = row
        dialogTableVisible.value = true
    }
    const editCheckType = async(ids:Array<number>) => {
        // 网络请求,修改关联
        await apiEditCheckType(checkdData.action.id,ids)
    }
    return {
        bindCheckTypeClick,
        editCheckType,
        checkTypeData
    }
}

export default defineComponent({
    name: 'ClientList',
    components: {
        TableSearch,
        CardList,
        CardListItem
    },
    setup() {
        const form: ISearchForm = reactive({
            client: ''
        })

        // const
        const tableData: ITable<ICheckTableList> = reactive({
            records: [],
            total: 0,
            pages: 1,
            size: 20
        })
        // 所有检测报告类型
        const checkTypeData: Array<ICheckTypeTableList> = reactive({ records:[]})
        // 点击了检测报告关联的数据
        const checkdData = reactive({ action: {},rightValue:[] })
        // 弹出层显示状态
        const dialogTableVisible = ref(false)
        return {
            form,
            tableData,
            dialogTableVisible,
            checkdData,
            ...tableRender(tableData, form),
            ...search(tableData, form),
            ...bindCheckType(checkdData, checkTypeData, dialogTableVisible)
        }
    }
})
</script>
